<template>
	<div class="warper">
		<div class="banner">
			<!-- <a href="javascript:void(0)" class="btn-add">
				<img src="../../../public/add.png" alt="">
				<p>Add a banner image</p>
				<p>suggested file:1920x320px JPG,JPEG,PNG max 20MB</p>
			</a> -->
			<!-- 按钮 -->
			
			<div class="btn-cont" v-if="flag">
				<div class="btn_upload">
					<input type="file" name="avator" id='uploadfile' value="上传照片" ref="input" @change="myAjax()" style="display: none;" />
					<span @click="posted">
						<img src="../../assets/images/add.png" alt="">
					</span>
				</div>
				<p>Add a banner image</p>
				<p>suggested file:1920x320px JPG,JPEG,PNG max 20MB</p>
			</div>
			<div class="showBanner" v-show="imgUrl">
				<img :src="imgUrl" alt="">
				<p class="name">MAOMI NEO</p>
			</div>

		</div>

	</div>
</template>

<script>
	/*global $*/
	// import $ from "../../js/jquery.js";
	export default {
		data() {
			return {
				flag: true,
				imgUrl: ''
			}
		},
		mounted() {
			this.myAjax()
		},
		methods: {
			posted() {
				this.$refs.input.click();
				console.log(11)
			},
			myAjax() {
				let that = this;
				// let uploadfile = document.querySelector("#uploadfile")
				$("#uploadfile").on("change", function(e) {
				// uploadfile.addEventListener("change",function(e){
					console.log(e)
					// 使用h5的formdata对象进行ajax请求
					var formdata = new FormData();
					// 前端读取文件
					var file = new FileReader();
					file.onload = function() {
						formdata.append('avator', file.result)
						console.log(file.result)
						that.imgUrl = file.result
					}
					file.readAsDataURL(e.target.files[0]);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warper {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 320px;
		background: url(../../assets/images/mobg.png) center no-repeat;
		background-size: cover;
		position: relative;
		margin-top: 84px;
	}

	.banner {
		text-align: center;
		line-height: 25px;

		img {
			padding-bottom: 20px;
		}

		p {
			color: #fff;
			font-weight: 400;
		}
	}

	.showBanner {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320px;
		img {
			display: block;
			width: 100%;
			height: 340px;
		}
		.name{
			display: block;
			position: absolute;
			left: 50%;
			top: 50%;
			font-size: 112.58px;
			color: #FEDE55;
			transform: translate(-50%,-50%);
		}
	}
	
	@media screen and (max-width:768px) {
		.showBanner{
			.name{
				font-size: 30px;
			}
		}
	}
	
	@media screen and (min-width:768px) and (max-width:982px) {
		.showBanner{
			.name{
				font-size: 60px;
			}
		}
	}
	@media screen and (min-width:982px) and (max-width:1200px) {
		.showBanner{
			.name{
				font-size: 80px;
			}
		}
	}
</style>
